<template>
	<view class="">
		<view class="search">
			<u--input placeholder="搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399;"/>
			<image src="../../static/images/screen_icon.png" alt="" class="screen" @click="popupShow=true">
		</view>
		<view>
			<view class="examineList" v-for="item in examineList" @click="toPage('examineListDetail')">
				<view class="title">
					<text class="maintitle">{{item.title}}</text>
				</view>
				<view>
					<view class="shift" v-if="item.title.includes('请假')">
						<text>{{item.content}}</text>
					</view>
					<view class="shift" v-else-if="item.title==='岗位申请'">
						<text>申请岗位：办事大厅助理</text><br>
						<text>岗位部门：教务处</text><br>
						<text>岗位地址：学生活动中心一楼</text>
					</view>
					<view class="shift" v-else-if="item.title==='离职申请'">
						<text>离职岗位：学生助理</text><br>
						<text>岗位部门：教务处</text><br>
					</view>
				</view>
				<view class="tel">
					<image src="../../static/images/message.png" alt=""
						style="vertical-align:middle;margin-right: 18rpx;width: 48rpx;height: 48rpx;border: 2px solid #EBF5F0;border-radius: 50%;" />
					<text>由张三瑞提交</text>
				</view>

				<text class="topRightTips">{{item.time}}</text>
				<text class="bottomRightTips"
					:style="{color: item.status===1?'#2674FF':item.status===2?'#12B34D':'#FF2626'}">{{item.status===1?'审批中':item.status===2?'已通过':'不通过'}}</text>
			</view>
		</view>

		<u-popup :show="popupShow" mode="top" @close="close" @open="open">
			<view :style="{'height':windowHeight}" style="position: relative;">
				<text class="typeTitle">状态</text>
				<u-icon @click="close" name="close" size="20" style="position: absolute;right: 32rpx;top: 62rpx;"></u-icon>
				<view class="screenBox">
					<view class="typeItem" :class="item == status?'typeBlue':''" v-for="(item, i) in statusList"
						:key="i" @click="changeStatus(item)">
						{{item}}
					</view>
				</view>
				<text class="typeTitle">类型</text>
				<view class="screenBox">
					<view class="typeItem" :class="item == type?'typeBlue':''" v-for="(item, i) in typeList" :key="i"
						@click="changeType(item)">
						{{item}}
					</view>
				</view>
				<view class="screenBtns">
					<u-button class="custom-style" text="重置" plain @click="type='';status=''"></u-button>
					<u-button class="custom-style" text="确认" plain @click="confirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: "0",
				statusList: [
					'审批中', '已通过', '不通过'
				],
				status: '',
				typeList: [
					'岗位申请', '请假', '离职'
				],
				type: '',
				popupShow: false,
				examineList: [{
						status: 1,
						title: '请假申请',
						time: '20:30',
						content: '请假班次：1/25日09:00-10:00;1/26日10:30-12:00;',
					},
					{
						status: 2,
						title: '请假申请',
						time: '20:30',
						content: '请假班次：1/25日09:00-10:00;1/26日10:30-12:00;1/25日09:00-10:00;1/26日10:30-12:00等',
					},
					{
						status: 3,
						title: '岗位申请',
						time: '昨天',
						content: '请假班次：1/25日09:00-10:00;1/26日10:30-12:00;1/25日09:00-10:00;1/26日10:30-12:00等',
					},
					{
						status: 3,
						title: '离职申请',
						time: '昨天',
						content: '请假班次：1/25日09:00-10:00;1/26日10:30-12:00;1/25日09:00-10:00;1/26日10:30-12:00等',
					},
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight + "px";
				}
			})
		},
		methods: {
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			confirm(){
				this.close()
			},
			close() {
				this.popupShow = false
			},
			changeStatus(item) {
				this.status = item
			},
			changeType(item) {
				this.type = item
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FAFAFA;
	}

	.search {
		height: 88rpx;
		background: #FFFFFF;
		padding: 8rpx 32rpx;

		.screen {
			margin-left: 10rpx;
			vertical-align: middle;
			margin-bottom: 12rpx;
			margin-right: 18rpx;
			width: 40rpx;
			height: 44rpx;
		}
	}

	.u-input {
		background: #F4F5F7;
		display: inline-block;
		width: 90%;
		
border-radius: 8px;
	}

	.examineList {
		width: 100%;
		background-color: #fff;
		width: 686rpx;
		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
		border-radius: 24px;
		background: #FFFFFF;
		padding: 32rpx 32rpx 24rpx 32rpx;
		position: relative;
		margin: 24rpx 32rpx 16rpx 32rpx;

		.title {
			margin-bottom: 24rpx;

			.maintitle {
				font-weight: 500;
				color: #333333;
			}
		}

		.shift {
			&>text {
				font-weight: 400;
				font-size: 24rpx;
				vertical-align: top;
				margin-top: 4rpx;
				color: #999999;
			}
		}

		.tel {
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #666;

		}

		.topRightTips {
			position: absolute;
			right: 32rpx;
			top: 38rpx;
			color: #999;
			font-size: 24rpx;
		}

		.bottomRightTips {
			position: absolute;
			right: 32rpx;
			bottom: 36rpx;
			font-size: 28rpx;
		}
	}

	
</style>
